<template>
  <div>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="classify">
        <ul>
          <li v-for="(item,key) in list" :key="key" @click="Info(item.id)">
            <div class="left">
                <img :src="item.avatar" alt="">
            </div>
            <div class="main">
                <p>{{item.real_name}}</p>
                <p><span>{{item.sex == 1 ? '女':'男'}}</span> <span>{{item.teach_age}}年教龄</span></p>
            </div>
            <div class="right">
                <button>预约</button>
            </div>
          </li>
        </ul>
      </div>
    </van-list>
  </div>
</template>

<script>
import { List } from 'vant';
import {otoList} from "../../request/api.js";

export default {
    components:{
         [List.name]: List,
    },
    onGetdata: {
      type: Function
    },
    onFinished: {
      type: Function
    },
    showText: {
      type: Boolean,
      default: true
    },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      page:0
    };
  },
  methods: {
  	isText:function(_value) {
        _value = ""+_value;
        if (_value == "null" || _value == null || _value == "" || _value == "undefined") {
            return '';
        }
        return _value;
    },
    // on evnet
    onLoad() {
      this.page++;
      this.requestList();
    },
    Info(id) {
      console.log(id);
      this.$router.push({ path: "/part", query: { id: id } });
    },
    // other
    reset(refresh = 0) {
      if (!refresh) {
        this.onGetdata && this.onGetdata([]);
      }
      this.$nextTick(() => {
        if (this.finished) {
          this.page = 0;
          this.finished = false;
        } else {
          this.page = 1;
          this.requestList();
        }
      });
    },
    // request
    requestList() {
      otoList(this.page).then(res => {
        this.loading = false;
        let data = res.data;
        console.log(data);
        console.log(this.page)
        if(this.isText(data.current_page)!='')
        {
        	
        	if (data.length == 0 && this.page != 1) {
	          this.finished = true;
	          this.onFinished && this.onFinished();
	          return;
	        }
	        this.onFormatter && this.onFormatter(data.list);
	        if (this.page == 1) {
	          this.list = data;
	        } else {
	          this.list = this.list.concat(data);
	        }
	        this.onGetdata && this.onGetdata(this.list);
        }
        else
        {
        	if (data.length == 0 && this.page != 1) {
	          this.finished = true;
	          this.onFinished && this.onFinished();
	          return;
	        }
	        this.onFormatter && this.onFormatter(data);
	        if (this.page == 1) {
	          this.list = data;
	        } else {
	          this.list = this.list.concat(data);
	        }
	        this.onGetdata && this.onGetdata(this.list);
        	 this.finished = true;
        }
      });
    }
  
},
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.classify {
  width: 100%;
  margin-bottom: 50px;
  margin-top: 80px;
  h5 {
    font-size: 18px;
    margin-top: 20px;
    margin-left: 10px;
  }
  ul {
    list-style: none;
    width: 100%;
    li {
      width: 96%;
      height: 100px;
      background: white;
      display: block;
      border-radius: 5px;
      text-align: center;
      display: flex;
      flex-wrap: wrap;
      margin: 8px auto;
      div{
          display: inline-block;
      }
      .left{
          width: 20%;
          height: 100%;
          margin: 0 auto;
          padding-top: 25px;
          img{
              width: 50px;
              height: 50px;
              border-radius: 50px;
          }
      }
      .main{
         width: 50%;
          height: 100%;
          text-align: left;
          padding-top: 30px;
          p{
              width: 100%;
              height: 20px;
              font-size: 15px;
              span{
                  font-size: 12px;
                  color:hsla(0, 1%, 51%, 0.671);
              }
          }
          
      }
      .right{
          width: 30%;
          height: 100%;
          text-align: left;
          padding-top: 30px;
          button{
              width: 60px;
              height: 30px;
              border-radius: 50px;
              border: none;
              color:orangered;
          }
      }
    }
  }
}
</style>